<template>
    <div style="width: 100%;height: 80%;display: flex;" >
    <div class="pieechart" ref="pieechart" style="width: 50%;height: 100%;">

    </div>
    <div class="table" style="width: 50%;height: 100%;">
        <el-table :data="tableData" :row-style="setRowHeight" :header-row-style="{ height: '10px' }" style="margin-top:5px;width: 100%;height: 100%;font-size: 10px;" :fit="true"  >
            <el-table-column prop="name" label="日期" show-overflow-tooltip></el-table-column>
            <el-table-column prop="num" label="姓名" ></el-table-column>
            <el-table-column prop="process" label="地址" show-overflow-tooltip></el-table-column>
        </el-table>
    </div>
    </div>
    
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'


const tableData=ref([
    {
        name:'东坡供电公司',
        num:'3000',
        process:'13号线路新增'
    },
    {
        name:'东坡供电公司',
        num:'3000',
        process:'13号线路新增'
    },
    {
        name:'东坡供电公司',
        num:'3000',
        process:'13号线路新增'
    },
    {
        name:'东坡供电公司',
        num:'3000',
        process:'13号线路新增'
    }
])
onMounted(()=>{
    drawPie()
})
const setRowHeight=({ row, rowIndex }) =>{
  console.log(row, rowIndex)
    // 可以按条件动态设置不同行高
    if (rowIndex === 0) {
      return { height: '20px' }; // 第一行高度 60px
    } else {
      return { height: '15px' }; // 其他行高度 40px
    }
  }
const pieechart = ref(null)
const drawPie=()=>{
    const echart = echarts.init(pieechart.value)
    const option={
        tooltip:{
            trigger:'item',
            formatter:'{a}<br/>{b}:{c}({d}%)'
        },
        legend:{
            top:'5%',
            left:'center',
            data:['业扩配套', '农网改造', '城市配网', '大修项目', '技改项目'],
            textStyle:{
                color:'#fff',
                fontSize:8
            }
        },
        gird:{
            top:'10%',
            bottom:'10%'
        },
        color: ['#7484FE', '#10B492', '#ED625F', '#089AC3', '#F3B761'],
        series:[
        {
            name: '访问来源',
            type: 'pie',
            center: ['45%', '62%'],
            radius: ['35%', '60%'],
            avoidLabelOverlap: false,
            // 环形图环行块样式
            itemStyle: {
              normal: {
                // borderRadius: 20,
                borderColor: '#0d1B42',
                borderWidth: 2
              },
              emphasis: {
                label: {
                  show: true,
                  textStyle: {
                    fontSize: '12',
                    fontWeight: 'bold'
                  }
                }
              }
            },
            // 环形内部lable
            label: {
              show: true,
              position: 'center',
              color: '#fff',
              formatter: ((parmas:any)=>{
                return '3000\n总投资（万元）'
              }),
            },
           
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: '10',
            //     fontWeight: 'bold'
            //   }
            // },
            labelLine: {
              show: false
            },
            data: [
              { value: 335, name: '业扩配套' },
              { value: 310, name: '农网改造' },
              { value: 234, name: '城市配网' },
              { value: 135, name: '大修项目' },
              { value: 1548, name: '技改项目' }
            ]
          }
        ],
        // graphic: [
        //                 {  //环形图中间文字
        //                     type: 'text',
        //                     left: 'center',
        //                     top: '40%',
        //                     style: {
        //                         text: '3000\n',
        //                         textAlign: 'center',
        //                         fill: 'yellow',
        //                         font: '14px "Arial" ',
                                
        //                     }
        //                 }
        //             ]
    }
    echart.setOption(option)
    window.addEventListener('resize',()=>{
        echart.resize()
    })
}
</script>

<style scoped lang="scss">
.el-table{
    --el-table-header-bg-color: transparent ;
    --el-table-header-text-color: #59deff ;
    --el-table-text-color:#fff;
    --el-table-bg-color: transparent; 
    --el-table-tr-bg-color: transparent;
    --el-table-border: 1px solid #59deff;
    --el-table-row-hover-bg-color: ;
    --el-table-current-row-bg-color: 
    // :deep(.el-table__header) {
    //     background-color: #0d1B42;
    //     color: #fff;
    // }

}
/* 方式 2：更精确控制（推荐） */
:deep(.el-table .el-table__body tr) {
  height: 10px !important;
}
:deep(.el-table .el-table__cell) {
  padding: 0 !important;
}
</style>